<script lang="ts" setup>
    import { ref, reactive } from 'vue';
    import {IconMinusCircleFill} from '@arco-design/web-vue/es/icon';
    const emit = defineEmits(['remove'])
    const props = withDefaults(
        defineProps<{
            modelValue:any;
            disableRemove: boolean;
            containCondition: any[],
            areaCity: any[]
        }>(),
        {
            disableRemove: false
        }
    )

</script>

<template>
    <div class="dis-flex align-items mb-12">
        <a-select 
            :options="props.areaCity" 
            v-model="props.modelValue.areaId"
            :style="{width: '120px'}"
            size="small"
            class="ml-6"
        />
        <a-input  
            v-model="props.modelValue.inputValue" 
            placeholder="请输入"
            size="small"
            class="ml-6 inputFilter"
            :style="{width: '360px'}"
        />
        <!-- v-if="!props.disableRemove" -->
        <icon-minus-circle-fill 
            style="color: red; cursor: pointer;margin-top: 7px;"
            size="16"
            class="ml-6"
            @click="
                () => {
                    emit('remove');
                }
            "
        />

    </div>

</template>

<style>

    .inputFilter {
        flex: 1 1 auto
    }
</style>